<template>
  <div class="container">
    <uni-nav-bar
      :border="false"
      backgroundColor="transparent"
      color="white"
      statusBar
      title="授课"
      fixed
    />
    <!-- 内容 -->
    <div class="box rela">
      <!-- 导航块 -->
      <div class="abso activeNav_left flex" v-if="active == 0">
        <div class="lable">在授课程</div>
        <image class="icon" src="/static/images/teaching/active_expand.png" />
      </div>
      <div class="abso activeNav_right flexend" v-else>
        <div class="lable">待授课程</div>
        <image class="icon" src="/static/images/teaching/active_expand.png" />
      </div>
      <!-- 灰色块 -->
      <div class="grayNav flexbet" @click="active = active === 0 ? 1 : 0">
        <div class="item flex">
          <div v-if="active == 1">在授课程</div>
          <image
            v-if="active == 1"
            src="/static/images/teaching/expand.png"
          ></image>
        </div>
        <div class="item flex">
          <div v-if="active == 0">待授课程</div>
          <image
            v-if="active == 0"
            src="/static/images/teaching/expand.png"
          ></image>
        </div>
      </div>
      <!-- 卡片列表 -->
      <div class="contentBlock" :style="{ height: h }">
        <scroll-view
          v-if="list.length > 0"
          class="contentBlock_scroll"
          :style="{ height: h }"
          scroll-y="true"
        >
          <!-- 卡片 带循环 -->
          <div
            class="card"
            v-for="(item, index) in list"
            :key="index"
            @click="toCourseDetail(item)"
          >
            <!-- 课程信息 -->
            <div class="card_course flex">
              <image class="cover" :src="item.course_pic" />
              <!--基本信息 -->
              <div class="baseInfo">
                <div class="baseInfo_name overtxt">
                  {{ item.course_name }}
                </div>
                <div class="baseInfo_data flex">
                  <image
                    class="icon"
                    src="/static/images/teaching/stu_icon.png"
                  />
                  <div class="value overtxt">
                    {{ item.finishStudents ? item.finishStudents : 0 }}/{{
                      item.allStudents ? item.allStudents : 0
                    }}
                  </div>
                  <image
                    class="icon"
                    src="/static/images/teaching/task_icon.png"
                  />
                  <div class="value overtxt">
                    {{ item.taskCount ? item.taskCount : 0 }}
                  </div>
                  <image
                    class="icon"
                    src="/static/images/teaching/exam_icon.png"
                  />
                  <div class="value overtxt">
                    {{ item.examCount ? item.examCount : 0 }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 添加按钮 -->
            <div class="card_add flex" @click.stop="addStudent(item)">
              <image class="icon" src="/static/images/teaching/add.png"></image>
              <div class="lable">添加员工</div>
            </div>
            <!-- 用户列表 -->
            <div class="card_user">
              <div
                class="card_user_item flex"
                v-for="(user, userIndex) in item.students"
                :key="userIndex"
                @click.stop="toStudyDetail(user)"
              >
                <!-- 头像 -->
                <image
                  class="avatar"
                  :src="
                    user.avatar
                      ? user.avatar
                      : require('.../../static/images/avatar_default.png')
                  "
                />
                <!-- 用户右边数据 -->
                <div class="card_user_item_right">
                  <!-- 基本信息 -->
                  <div class="item_info flexbet">
                    <div class="item_info_left flex">
                      <div class="name overtxt">{{ user.studentName }}</div>
                      <image
                        class="sex"
                        :src="
                          user.sex == 1
                            ? require('../../static/images/teaching/women.png')
                            : require('../../static/images/teaching/man.png')
                        "
                      ></image>
                    </div>
                    <div
                      v-if="user.passing == 2"
                      class="item_info_right flex"
                      @click.stop="toCorrect(user)"
                    >
                      <div class="tip">去批改</div>
                      <image
                        class="to"
                        src="/static/images/teaching/to.png"
                      ></image>
                    </div>
                  </div>
                  <!-- 进度条 -->
                  <div class="progressbox flex">
                    <div class="progress rela">
                      <div
                        :style="{ width: user.learningProgress + '%' }"
                        class="progress_bar abso"
                      ></div>
                    </div>
                    <div class="value">{{ user.learningProgress }}%</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 查看更多 -->
            <div class="card_more" @click.stop="lookAll(item)">查看更多</div>
          </div>
          <div style="height: 1rpx"></div>
        </scroll-view>
        <van-empty v-else description="暂无课程" />
      </div>
    </div>
    <!-- 添加学员 -->
    <addStudentDia
      @refresh="getList()"
      :open.sync="showDialog"
      :course="item"
    ></addStudentDia>
  </div>
</template>

<script>
import addStudentDia from "./components/addStudentDia.vue";
import { teacherCourseList } from "@/common/api/teaching.js";
export default {
  components: { addStudentDia },
  data() {
    return {
      showDialog: false,
      active: 0,
      safeAreaInsetsTop: "",
      navigationBarHeight: "",
      h: "",
      teachingList: [],
      waitingList: [],
      list: [],
      item: {},
    };
  },
  watch: {
    active: {
      handler(newValue, oldValue) {
        /* 获取卡片列表 */
        if (newValue == 0) {
          this.list = this.teachingList;
        } else {
          this.list = this.waitingList;
        }
      },
    },
  },
  onLoad() {},
  onShow() {
    this.getList();
    this.safeAreaInsetsTop = getApp().globalData.$safeAreaInsetsTop;
    this.navigationBarHeight = getApp().globalData.$navigationBarHeight;
    this.h = `calc(100vh - ${this.navigationBarHeight}rpx - 90rpx - ${this.safeAreaInsetsTop}px)`;
  },

  methods: {
    /* 获取卡片列表 */
    async getList() {
      uni.showLoading({
        mask: true,
        title: "加载中",
      });
      let res = await teacherCourseList();
      uni.hideLoading();
      this.teachingList = res.data.teachingList;
      this.waitingList = res.data.waitingList;
      if (this.active == 0) {
        this.list = this.teachingList;
      } else {
        this.list = this.waitingList;
      }
    },
    /* 查看课程信息详情 */
    toCourseDetail(item) {
      uni.navigateTo({
        url: `/pages/selectiCourse/courseDetail?courseId=${item.course_id}&orderCourseId=${item.orderCourseId}&type=teaching`,
      });
    },
    /* 添加学员 */
    async addStudent(item) {
      console.log("添加员工");
      this.item = item;
      this.showDialog = true;
    },
    /* 去批改 */
    toCorrect(user) {
      uni.navigateTo({
        url: `/pages/selectiCourse/exam?courseStuId=${user.courseStuId}&paperId=${user.examPaperId}&type=onlineExam&status=correct`,
      });
    },
    /* 去员工学习详情 */
    toStudyDetail(user) {
      uni.navigateTo({
        url: `/pages_teaching/studentStudyDetail?courseStuId=${user.courseStuId}`,
      });
    },
    /* 查看更多 */
    lookAll(item) {
      uni.navigateTo({
        url: `/pages_teaching/studentStudyList?orderCourseId=${item.orderCourseId}&courseName=${item.course_name}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.mirror-image {
  transform: scaleX(-1) scaleY(-1);
}
.box {
  padding: 16rpx 0 0 0;
  // 导航块
  .activeNav_right {
    .lable {
      margin: 32rpx 0 0 0;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #7355fe;
      line-height: 44rpx;
    }
    .icon {
      width: 32rpx;
      height: 32rpx;
      margin: 38rpx 126rpx 0 20rpx;
    }
    box-sizing: border-box;
    z-index: 10;
    right: -1rpx;
    top: 4rpx;
    width: 406rpx;
    height: 122rpx;
    background-image: url("https://oss.metaxun.com/wx/active_nav_right.png");
    background-size: 406rpx 122rpx;
  }
  .activeNav_left {
    .lable {
      margin: 32rpx 0 0 94rpx;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #7355fe;
      line-height: 44rpx;
    }
    .icon {
      width: 32rpx;
      height: 32rpx;
      margin: 38rpx 0 0 20rpx;
    }
    box-sizing: border-box;
    z-index: 10;
    left: 0;
    top: 4rpx;
    width: 406rpx;
    height: 122rpx;
    background-image: url("https://oss.metaxun.com/wx/active_nav_left.png");
    background-size: 406rpx 122rpx;
  }
  // 灰色导航
  .grayNav {
    padding: 0 94rpx;
    height: 110rpx;
    background: rgba($color: #000000, $alpha: 0.1);
    border-radius: 16px 16px 0 0;
    .item {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 74rpx;
      image {
        margin: 22rpx 0 0 20rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  // 卡片列表
  .contentBlock {
    margin-top: -36rpx;
    border-radius: 16px;
    box-sizing: border-box;
    background: rgba(246, 247, 248, 0.9);
    backdrop-filter: blur(21px);
    .contentBlock_scroll {
      box-sizing: border-box;
      padding: 36rpx 0 0 0;
      .card:last-of-type {
        margin: 0 32rpx 0rpx 32rpx;
      }
      // 卡片
      .card {
        box-sizing: border-box;
        padding: 36rpx 18rpx 0 18rpx;
        margin: 0 32rpx 32rpx 32rpx;
        width: 686rpx;
        background: #ffffff;
        border-radius: 16rpx;
        //  课程信息
        .card_course {
          .cover {
            box-sizing: border-box;
            border: 1rpx solid rgba(120, 120, 120, 0.1);
            width: 216rpx;
            height: 136rpx;
            border-radius: 16rpx;
          }
          .baseInfo {
            margin-left: 20rpx;
            .baseInfo_name {
              width: 410rpx;
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              color: #333333;
              line-height: 42rpx;
            }
            .baseInfo_data {
              margin-top: 18rpx;
              .icon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 2rpx;
              }
              .value:last-of-type {
                margin-right: 0;
              }
              .value {
                margin-right: 8rpx;
                width: 96rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 32rpx;
              }
            }
          }
        }
        // 添加按钮
        .card_add {
          margin-top: 20rpx;
          width: 646rpx;
          height: 80rpx;
          background: #f6fafe;
          border-radius: 8rpx;
          .icon {
            width: 40rpx;
            height: 40rpx;
            margin: 20rpx 20rpx 0 236rpx;
          }
          .lable {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 80rpx;
          }
        }
        // 用户列表
        .card_user {
          .card_user_item {
            margin-top: 8rpx;
            width: 646rpx;
            height: 132rpx;
            background: #f6fafe;
            border-radius: 8rpx;
            box-sizing: border-box;
            padding: 24rpx 24rpx 0 24rpx;
            .avatar {
              width: 64rpx;
              height: 64rpx;
              border-radius: 32rpx;
              margin-right: 16rpx;
            }
            //  用户右边数据
            .card_user_item_right {
              flex: 1;
              //  基本信息
              .item_info {
                .item_info_left {
                  .name {
                    width: 300rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    line-height: 42rpx;
                  }
                  .sex {
                    width: 24rpx;
                    height: 24rpx;
                    margin: 8rpx 0 0 16rpx;
                  }
                }
                .item_info_right {
                  .tip {
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 34rpx;
                  }
                  .to {
                    margin-left: 16rpx;
                    width: 32rpx;
                    height: 32rpx;
                  }
                }
              }
              //  进度条
              .progressbox {
                .progress {
                  margin-top: 23rpx;
                  width: 220rpx;
                  height: 8rpx;
                  background: #ebebeb;
                  border-radius: 6rpx;
                  .progress_bar {
                    top: 0;
                    left: 0;
                    height: 8rpx;
                    background: linear-gradient(
                      270deg,
                      #f76b1c 0%,
                      #fad961 100%
                    );
                    border-radius: 6rpx;
                  }
                }
                .value {
                  margin: 8rpx 0 0 20rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #f85314;
                  line-height: 34rpx;
                }
              }
            }
          }
        }
        // 查看更多
        .card_more {
          text-align: center;
          height: 80rpx;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 80rpx;
        }
      }
    }
  }
}
.container {
  overflow: hidden;
  width: 750rpx;
  //   background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/msgbg.png");
  background: linear-gradient(
    360deg,
    #fff6ff 0%,
    #fdebfd 13%,
    #e88de8 45%,
    #8561fe 100%
  );
  //   background-size: 100% auto;
}

.navs {
  z-index: 10;
  padding: 24rpx 0 32rpx 0;

  .navbg {
    width: 180rpx;
    height: 64rpx;
    background: #ff4d03;
    border-radius: 32px;
  }

  .nav {
    width: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 32px;
  }

  .navactive {
    width: 180rpx;
    text-align: center;
    height: 64rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 64rpx;
    // background: #ff4d03;
    border-radius: 32px;
  }
}
</style>